<script setup lang="ts">
import { useCategoryStore } from "@/store/category.ts";
import { useCoachStore } from "@/store/coach.ts";
import { reactive, ref } from "vue";
import { addCourseAPI, putCourseAPI } from "@/api/resource.ts";
import { ElMessage } from "element-plus";

const categoryStore = useCategoryStore()
const coachStore = useCoachStore()
const dialogVisible = ref(false)
const id = ref('')
const type = ref(1)
const ruleFormRef = ref()
const uploadUrl = import.meta.env.VITE_UPLOAD_COURSE_COVER
const emit = defineEmits(['get'])

// 等级列表
const gradeList = [
  {
    label: 'K1'
  },
  {
    label: 'K2'
  },
  {
    label: 'K3'
  },
  {
    label: 'K4'
  },
]

// 状态列表
const stateList = [
  {
    label: '预报名',
    value: 1
  },
  {
    label: '已结束',
    value: 2
  }
]

// 是否定期
const termlyList = [
  {
    label: '定期课程',
    value: 1
  },
  {
    label: '非定期课程',
    value: 2
  }
]

// 表单数据
const courseData = reactive({
  name: '',
  desc: '',
  coverUrl: '',
  time: '',
  grade: '',
  consume: '',
  state: '',
  deadline: '',
  holding: '',
  category: '',
  termly: 1,
  coach: '',
  limit: ''
})

// 初始
const init = (row: any, number: number) => {
  dialogVisible.value = true
  type.value = number
  id.value = ''
  if (number !== 1) {
    id.value = row._id
    const {_id, createdAt, updatedAt, userList, ...obj} = {...row, coach: row.coach[0]._id}
    Object.assign(courseData, obj)
  } else {
    courseData.name = ''
    courseData.desc = ''
    courseData.coverUrl = ''
    courseData.time = ''
    courseData.grade = ''
    courseData.consume = ''
    courseData.state = ''
    courseData.deadline = ''
    courseData.holding = ''
    courseData.category = ''
    courseData.termly = 1
    courseData.coach = ''
    courseData.limit = ''
  }
}

// 上传头像
const handlerCoverSuccess = async (res: any) => {
  courseData.coverUrl = res.data
}

// 取消
const handleCancel = () => {
  dialogVisible.value = false
}

// 添加课程
const handleAdd = async () => {
  const res: any = await addCourseAPI(courseData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.message
    })
    dialogVisible.value = false
    emit('get')
  }
}

// 编辑课程
const handleEdit = async () => {
  const res: any = await putCourseAPI(id.value, courseData)
  if (res.code === 0) {
    ElMessage({
      type: 'success',
      message: res.message
    })
    dialogVisible.value = false
    emit('get')
  }
}

defineExpose({
  init
})
</script>

<template>
  <el-dialog :close-on-click-modal="false" v-model="dialogVisible" :title="type === 1 ? '添加课程':'编辑课程'">
    <el-form
      ref="ruleFormRef"
      :model="courseData"
      status-icon
      class="demo-ruleForm row"
    >
      <div>
        <el-form-item label="名称" prop="name">
          <el-input v-model="courseData.name" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="耗时" prop="time">
          <el-input v-model.number="courseData.time" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="等级" prop="grade">
          <el-select v-model="courseData.grade" class="m-2" placeholder="等级">
            <el-option
              v-for="(item, index) in gradeList"
              :key="index"
              :label="item.label"
              :value="item.label"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="人数" prop="limit">
          <el-input v-model.number="courseData.limit" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="消耗" prop="consume">
          <el-input v-model.number="courseData.consume" autocomplete="off"/>
        </el-form-item>
        <el-form-item label="上传封面">
          <el-upload
            ref="uploadRef"
            class="upload-demo"
            :on-success="handlerCoverSuccess"
            :action="uploadUrl"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
      </div>
      <div style="margin-left: 20px" class="right-content column">
        <div class="row">
          <el-date-picker
            v-model="courseData.deadline"
            type="date"
            placeholder="报名截止日期"
          />
          <el-date-picker
            v-model="courseData.holding"
            type="date"
            style="margin-left: 20px"
            placeholder="课程开始日期"
          />
        </div>
        <div class="row" style="margin-top: 20px">
          <el-select v-model="courseData.coach" class="m-2" placeholder="教练">
            <el-option
              v-for="item in coachStore.coachList"
              :key="item._id"
              :value="item._id"
              :label="item.name"
            />
          </el-select>
          <el-select style="margin-left: 20px" v-model="courseData.category" class="m-2" placeholder="分类">
            <el-option
              v-for="item in categoryStore.categoryList"
              :key="item._id"
              :value="item._id"
              :label="item.nickname"
            />
          </el-select>
        </div>
        <div class="row" style="margin-top: 20px">
          <el-select v-model="courseData.state" class="m-2" placeholder="状态">
            <el-option
              v-for="item in stateList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
          <el-select style="margin-left: 20px" v-model="courseData.termly" class="m-2" placeholder="是否定期">
            <el-option
              v-for="item in termlyList"
              :key="item.value"
              :value="item.value"
              :label="item.label"
            />
          </el-select>
        </div>
        <el-form-item>
          <el-input type="textarea" :rows="3" v-model="courseData.desc" resize="none" placeholder="请写下课程描述..."
                    style="margin-top: 20px"/>
        </el-form-item>
        <el-form-item class="center btn-class">
          <el-button class="confirm-btn" @click="handleCancel">取消</el-button>
          <el-button type="primary" v-if="type === 1" class="confirm-btn" @click="handleAdd">
            确认
          </el-button>
          <el-button type="primary" v-else class="confirm-btn" @click="handleEdit">确认
          </el-button>
        </el-form-item>
      </div>
    </el-form>
  </el-dialog>
</template>

<style scoped lang="scss">
.btn-class {
  .confirm-btn {
    width: 120px;
  }
}
</style>
